@page "/admin/access-denied"
@rendermode InteractiveServer

<PageTitle>访问被拒绝 - 导航网站</PageTitle>

<div class="container d-flex justify-content-center align-items-center" style="min-height: 100vh;">
    <div class="row justify-content-center">
        <div class="col-md-6 col-lg-5">
            <div class="text-center">
                <!-- 403错误图标 -->
                <div class="mb-4">
                    <i class="bi bi-shield-x text-danger" style="font-size: 6rem;"></i>
                </div>
                
                <!-- 错误标题 -->
                <h1 class="display-4 fw-bold text-danger mb-3">403</h1>
                <h2 class="h4 mb-3">访问被拒绝</h2>
                
                <!-- 错误描述 -->
                <div class="alert alert-warning" role="alert">
                    <i class="bi bi-exclamation-triangle me-2"></i>
                    您没有权限访问此页面。只有管理员才能访问后台管理系统。
                </div>
                
                <!-- 操作按钮 -->
                <div class="d-grid gap-2 d-md-block">
                    <a href="/admin/login" class="btn btn-primary">
                        <i class="bi bi-box-arrow-in-right me-2"></i>管理员登录
                    </a>
                    <a href="/" class="btn btn-outline-secondary">
                        <i class="bi bi-house me-2"></i>返回首页
                    </a>
                </div>
                
                <!-- 帮助信息 -->
                <div class="mt-4">
                    <small class="text-muted">
                        如果您是网站管理员，请先登录后再访问管理页面。<br>
                        默认管理员账号: admin / admin
                    </small>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    body {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        background-attachment: fixed;
    }
    
    .container {
        background: rgba(255, 255, 255, 0.95);
        border-radius: 15px;
        backdrop-filter: blur(10px);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        margin: 20px;
        padding: 40px 20px;
    }
    
    .btn {
        border-radius: 25px;
        padding: 10px 25px;
        font-weight: 500;
        transition: all 0.3s ease;
    }
    
    .btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }
    
    .alert {
        border-radius: 10px;
        border: none;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
</style> 